<template>
  <el-card class="box-shandow" :body-style="{background:'linear-gradient(90deg, #5171fd, #c97afd)'}"
           style="border-radius: 10px">
    <div
        style="color:white;display: flex;flex-direction: column;height: 85px;justify-content: space-around;align-items: center">
      <div style=";font-size: 18px;text-transform:uppercase"> {{ text1 }}</div>
      <div class=""
           style="font-weight: bold;font-size: 24px;text-transform: capitalize;"> {{ text2 }}
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { computed, defineProps, inject, watch } from 'vue'
import i18n from '@/hooks/language'

const { t } = i18n()
let text1 = null
let text2 = null
const shiftDate = inject('shiftDate')
const shiftCode = inject('shiftCode')
const queryParams = inject('queryParams')

const props = defineProps({
  isShift: {
    type: Boolean,
    default: false
  }
})
const shiftCodeComputed = computed(() => {
  console.log(queryParams?.shiftCode || shiftCode?.value)
  return queryParams?.shiftCode || shiftCode?.value
})
if (props.isShift) {
  text1 = t('mes.ShiftDataSum')
  text2 = shiftCodeComputed
} else {
  text1 = t('mes.DailyDataSum')
  text2 = shiftDate
}
</script>

<style scoped>
.box-shandow {
  box-shadow: 0 1px 2px 0 rgb(0 0 0);
}
</style>
